<template>
  <el-dialog
    v-model="dialogVisible"
    :append-to-body="true"
  >
    <template #header>
      <div class="detail-title-info flex-center-center">
        <common-icon style="margin: 0 10px" icon-name="List" width="60" height="60" size="20"></common-icon>
        <el-input v-if="editCardName" v-model="cardInfo.cardName" @blur="handleUpdateCard"></el-input>
        <div v-else class="title-style pointer" @click="editCardName = !editCardName">{{cardInfo.cardName}}</div>
      </div>
    </template>
    <div class="card-detail-container">
        <div class="left-box">
          <div class="card-header-content">
            <common-icon icon-name="Grid"></common-icon>
            <h1></h1>
          </div>
        </div>
      <div class="right-box"></div>
    </div>
  </el-dialog>
</template>

<script setup>
import {ref} from "vue";
import CommonIcon from "@/components/CommonIcon.vue";
import {updateCard} from "@/api/card.js";

const editCardName = ref(false)
const handleUpdateCard = async () => {
  const res = await updateCard(cardInfo.value);
  editCardName.value = false
}

const dialogVisible = ref(false);
const cardInfo = ref({})
const open = (info) => {
  cardInfo.value = info;
  dialogVisible.value = true;
}

defineExpose({
  open
})
</script>


<style scoped lang="less">
.card-detail-container {

}

.detail-title-info {
  height: 40px;
  .title-style {
    font-size: 18px;
    font-weight: 500;
    flex: 1;
  }
}
</style>